<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul, body{
            margin: 0;
            padding: 0;
        }

        li{
            list-style: none;
            float: left;
            /* float: right; */
            margin-right: 10px;
        }


        #box{
            background: pink;
        }

        #box .list{
            float: left;
        }




        /* 浮动2 */
        #box{
            /* overflow: hidden; */
        }


        /* 浮动3 */
        #box::after{
            content: '';
            display: block;
            clear: both;
        }

        
        p:nth-of-type(1)::first-letter{
            font-size: 50px;
        }

        p:nth-of-type(2) span{
            font-size: 50px;
            float: left;
        }

    </style>
</head>
<body>
    <!--  
        1. 浮动作用
            * 将竖排变成横排    ( 要么浮动到最边侧, 要么浮动到上一个浮动元素的边侧 )
            * 文字环绕

        2. 浮动属性
            float: left     左浮动
                    right   右浮动
                    none    不浮动

        3. 浮动注意事项
            浮动元素不占位 (如果需要占位, 需及时清除浮动)

        4. 清除浮动
            clear: left     清除左浮动
                    right   清除右浮动
                    both    清除左右浮动

            清除原理: 
                后面的元素清除前面的元素 (兄弟关系)

            清除方式1: (原理)
                在浮动元素的最后面, 添加一个空元素, 并赋予clear属性  (少用)

            清除方式2: (BFC)
                给浮动元素的父级添加属性  overflow:hidden , 从而形成BFC区域, 可以清除子元素的浮动

                BFC: 不会影响BFC之外的任何元素
                     overflow:hidden 是形成BFC的一种写法

            清除方式3: (兼容最高的写法)
                给浮动元素的父级添加 伪对象
                父级元素::after{
                    content: '';
                    display: block;
                    clear: both;
                }
    -->
    
    <ul>
        <li>首页</li>
        <li>运动帽</li>
        <li>硬顶帽</li>
        <li>软顶帽</li>
        <li>渔夫帽</li>
        <div style="clear: left;"></div>
    </ul>



    <div id="box">
        <div class="list">黄焖鸡</div>
        <div class="list">白斩鸡</div>
        <div class="list">大盘鸡</div>
        <div class="list">三杯鸡</div>
        <!-- <div style="clear:left"></div> -->
    </div>




    <!-- 文字环绕 -->
    <p>曾经跟媳妇吵架了, 突然间想: 一个大老爷们跟一个娘们有什么好计较的. 于是, 跟媳妇道个歉. 媳妇一听, 挺开心的, 就把手上的刀放下了, 她妹妹就把拽着我头发的手松开的了, 她哥哥呢, 把棒球棍松开了, 老丈人页拿出了电话: 棺材退了吧. 这个故事告诉一个道理: 夫妻之间只要多沟通, 生活还是很美好的. </p>


    <p><span>曾</span>经跟媳妇吵架了, 突然间想: 一个大老爷们跟一个娘们有什么好计较的. 于是, 跟媳妇道个歉. 媳妇一听, 挺开心的, 就把手上的刀放下了, 她妹妹就把拽着我头发的手松开的了, 她哥哥呢, 把棒球棍松开了, 老丈人页拿出了电话: 棺材退了吧. 这个故事告诉一个道理: 夫妻之间只要多沟通, 生活还是很美好的. </p>


</body>
</html>